<template>
    <section>
      <div class="video_title">《{{title}}》----{{name}}</div>
      <video id="my-video" class="video-js vjs-default-skin video" controls preload="auto" >
        <source :src="url" type="application/x-mpegURL" >
      </video>
    </section>
</template>

<script>
    import videojs from 'video.js'
    import 'videojs-contrib-hls'
    export default {
        name: "videoPlay",
        data(){
            return{
                url: "",
                name:"",
                title:""
            };
        },
        mounted() {
            this.url = this.getUrlKey("url")
            this.name = this.getUrlKey("name")
            this.title = this.getUrlKey("title")
            this.$nextTick(() => {
                videojs(document.getElementById('my-video'), {
                    bigPlayButton: false,
                    textTrackDisplay: false,
                    posterImage: true,
                    errorDisplay: false,
                    controlBar: true,
                    autoplay:true,
                    muted:false,
                    width: "1078px",
                    height:"608px"
                }, function () {
                    this.play()
                })
            })

        },
        methods:{
            getPageName:function () {
                return "videoPlay";
            }
        }
    }
</script>

<style scoped>
  .video{
    margin: 10px 150px;
  }
  .video_title{
    margin: 10px 150px;
    color: #ffffff;
    font-size: 30px;
    text-align: left;
    padding: 10px 0px;
    border-top: 1px solid #999999;
  }
</style>
